<template>
    <!-- 列表页面 -->
    <div class="tableSample">
        <div class="header">
            <div class="header-left">
                <p class="title">
                    订单核算
                    <el-button type="primary" plain style="margin-left: 30px;" @click="exportToExcel" :loading="excelLoad">导出信息</el-button>
                </p>
            </div>
            <div class="header-right">
                <lin-search @query="onQueryChange" placeholder="请输入支付number" />
                <el-select v-model="search.store_id" clearable filterable placeholder="请选择店面" @change="onSelectChange" style="margin-left: 20px">
                    <el-option
                            v-for="item in storeData"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id">
                    </el-option>
                </el-select>
                <lin-date-picker @dateChange="handleDateChange" ref="searchDate" class="date" style="margin-left: 20px">
                </lin-date-picker>
            </div>
        </div>
        <!-- 表格 -->
        <lin-table
                border
                :tableColumn="tableColumn"
                :tableData="tableData"
                :operate="operate"
                v-loading="loading"
        ></lin-table>
        <!-- 分页 -->
        <div class="pagination" v-if="total_nums > 0">
            <el-pagination
                    @current-change="handleCurrentChange"
                    :background="true"
                    :page-size="pageCount"
                    :current-page="currentPage"
                    v-if="refreshPagination"
                    layout="total,prev, pager, next, jumper"
                    :operate="operate"
                    :total="total_nums"
            ></el-pagination>
        </div>
    </div>
</template>

<script>
import Bus from '@/models/bus'
import Store from '@/models/store'
import LinSearch from '@/components/base/search/lin-search'
import LinTable from '@/components/base/table/lin-table'
import LinDatePicker from '@/components/base/date-picker/lin-date-picker'

export default {
  components: {
    LinSearch,
    LinTable,
    LinDatePicker,
  },
  data() {
    return {
      tableColumn: [
        {
          prop: 'store.name',
          label: '门店名称',
        },
        {
          prop: 'order_no',
          label: '订单号',
          width: 150,
        },
        {
          prop: 'out_trade_no',
          label: '支付number',
          width: 150,
        },
        {
          prop: 'actual_price',
          label: '订单价格',
          width: 150,
        },
        {
          prop: 'pay_time',
          label: '支付时间',
          width: 150,
        },
        {
          prop: 'user.nickname',
          label: '购买者昵称',
          width: 150,
        },
        {
          prop: 'user.phone',
          label: '购买者手机号',
          width: 150,
        },
        {
          prop: 'invite.nickname',
          label: '推荐者昵称',
          width: 150,
        },
        {
          prop: 'invite.phone',
          label: '推荐者手机号',
        },
        {
          prop: 'invitation_money',
          label: '此单支出',
        },
        {
          prop: 'bus_price',
          label: '微信商户平台交易金额',
        },
      ],
      tableData: [],
      storeData: [],
      operate: [],
      loading: false,
      excelLoad: false,
      orderSort: 0,
      StoreId: 0,
      search: {
        store_id: '',
        name: '',
        start_time: '',
        end_time: '',
      },
      // 分页相关
      refreshPagination: true, // 页数增加的时候，因为缓存的缘故，需要刷新Pagination组件
      currentPage: 1, // 默认获取第一页的数据
      pageCount: 10, // 每页10条数据
      total_nums: 0, // 分组内的总数
      dialogImageUrl: '',
      dialogVisible: false,
      store_name: '',
    }
  },
  computed: {},
  created() {
    this.getStoreAll()
    this._getTableData(this.currentPage, this.pageCount)
  },
  methods: {
    async exportToExcel() {
      const self = this
      self.excelLoad = true
      const res = await Bus.getBusAll({
        name: this.search.name,
        store_id: this.search.store_id,
        start_time: this.search.start_time,
        end_time: this.search.end_time,
      })
      if (res.length === 0) {
        self.excelLoad = false
        return false
      }
      const list = []
      res.forEach((item, k) => {
        if (!res[k].user) {
          res[k].user = {
            nickname: '未知',
            phone: '未知',
          }
        }
        if (!res[k].invite) {
          res[k].invite = {
            nickname: '未知',
            phone: '未知',
          }
        }
        list.push({
          store_name: item.store.name,
          order_no: item.order_no,
          out_trade_no: item.out_trade_no,
          actual_price: item.actual_price,
          pay_time: item.pay_time,
          user_nickname: item.user.nickname,
          user_phone: item.user.phone,
          nickname: item.invite.nickname,
          phone: item.invite.phone,
          invitation_money: item.invitation_money,
          bus_price: item.bus_price,
        })
      })
      require.ensure([], () => {
        const {
          export_json_to_excel,
          // eslint-disable-next-line global-require
        } = require('../excel/Export2Excel')
        const tHeader = [
          '门店名称',
          '订单号',
          '支付number',
          '订单价格',
          '支付时间',
          '购买者昵称',
          '购买者手机号',
          '推荐者昵称',
          '推荐者手机号',
          '此单支出',
          '微信商户平台交易金额',
        ]
        const filterVal = [
          'store_name',
          'order_no',
          'out_trade_no',
          'actual_price',
          'pay_time',
          'user_nickname',
          'user_phone',
          'nickname',
          'phone',
          'invitation_money',
          'bus_price',
        ]
        const data = self.formatJson(filterVal, list)
        const date = new Date()
        const year = date.getFullYear()
        const month = date.getMonth() + 1// js中是从0开始所以要加1
        const day = date.getDate()
        export_json_to_excel(tHeader, data, `订单核算${year}${month}${day}`)
      })
      self.excelLoad = false
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map(v => filterVal.map(j => v[j]))
    },
    async getStoreAll() {
      this.storeData = await Store.getStoreAll()
    },
    addClose() {
      this.showAdd = false
      this.loading = true
      this._getTableData(this.currentPage, this.pageCount)
    },
    // 切换分页
    async handleCurrentChange(val) {
      this.currentPage = val
      this.loading = true
      this._getTableData(this.currentPage, this.pageCount)
    },
    // 搜索姓名
    onQueryChange(query) {
      this.search.name = query.trim()
      if (!query) {
        this._getTableData(1, 10)
        return
      }
      this.loading = true
      this.currentPage = 1
      this._getTableData(this.currentPage, this.pageCount)
    },
    handleDateChange(date) {
      if (date) {
        // eslint-disable-next-line prefer-destructuring
        this.search.start_time = date[0]
        // eslint-disable-next-line prefer-destructuring
        this.search.end_time = date[1]
      } else {
        this.search.start_time = ''
        this.search.end_time = ''
      }
      this.loading = true
      this.currentPage = 1
      this._getTableData(this.currentPage, this.pageCount)
    },
    onSelectChange() {
      this.loading = true
      this.currentPage = 1
      this._getTableData(this.currentPage, this.pageCount)
    },
    // 获取数据
    async _getTableData(start, count) {
      const res = await Bus.getBusList(start, count, {
        name: this.search.name,
        store_id: this.search.store_id,
        start_time: this.search.start_time,
        end_time: this.search.end_time,
      })
      this.tableData = res.data
      this.total_nums = res.count
      this.$nextTick(() => {
        this.loading = false
      })
    },
  },
}
</script>

<style lang="scss" scoped>
    .tableSample {
        padding: 0 0 30px;

        .header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 30px;
            border-bottom: 1px solid #dae1ed;

            .header-left {
                float: left;

                .title {
                    height: 59px;
                    line-height: 59px;
                    color: $parent-title-color;
                    font-size: 16px;
                    font-weight: 500;
                }
            }

            .header-right {
                float: right;
                display: flex;
                justify-content: space-between;
                align-items: center;
            }
        }

        .table-main {
            padding: 0 30px;
            margin-top: 30px;
        }

        .top-operate {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 15px;
            margin-top: 30px;
        }

        .sort-input {
            width: 50px;
            background: none;
            justify-content: space-around;
        }

        .table-edit {
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 100%;
            .content {
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }

            .cell-icon {
                cursor: pointer;
                color: #3963bc;
                font-size: 16px;
            }

            .cell-icon-edit {
                display: flex;
                margin-left: 20px;
                width: 50px;
                justify-content: space-between;

                .cell-cancel {
                    cursor: pointer;
                    color: #3963bc;
                    font-size: 16px;
                }

                .cell-save {
                    cursor: pointer;
                    color: #3963bc;
                    font-size: 16px;
                    margin-right: -20px;
                }
            }
        }

        .m-20 {
            margin-bottom: 10px;
            margin-top: 5px;
        }

        .summary {
            display: flex;
            justify-content: flex-start;
            flex-direction: row;

            img {
                width: 135px;
                height: 200px;
            }

            .demo-table-expand {
                font-size: 0;
                margin-left: 30px;
                display: flex;
                flex-direction: column;

                label {
                    width: 90px;
                    color: #99a9bf;
                }

                .el-form-item {
                    margin-right: 0;
                    margin-bottom: 0;
                    display: flex;
                    flex-direction: row;
                }
            }
        }

        .pagination {
            display: flex;
            justify-content: flex-end;
            margin: 20px;
        }
    }
    // dialog
    .tableSample /deep/ .el-dialog__footer {
        text-align: center;
        padding-left: 30px;
    }

    .tableSample /deep/ .el-dialog__header {
        padding-left: 30px;
    }

    .tableSample /deep/ .el-dialog__body {
        padding: 30px;
    }
</style>
